<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>视频点播</title>
    <div th:replace="fragment/header::css"></div>
    <div th:replace="fragment/header::js"></div>
</head>
<body style=" background-size:100% 100% ; background-attachment: fixed">
<div class = "container">
    <div th:replace="fragment/nav::nav"></div>
<div class = "container">
    <div class = "row">
        <div class = "col-12">

            <ul class="list-group">
                <li class="list-group-item">
                    <div class = "container">
                        <div class = "media">
                            <a class = "media-left" href = "#">
                                <img th:src="@{${media.getMediaCover()}}" class="rounded float-left" th:alt="${media.getMediaName()}" width="120" height="170"></a>
                            <div class = "media-body" style="margin-left: 28px">
                                <h3 class = "media-heading"><a href = "ciyuanfadian.jsp" th:text="${media.getMediaName()}"></a></h3>
                                <p th:text="'导&nbsp;&nbsp;&nbsp;&nbsp;演：'+${user.getUserName()}"></p>
                                <p th:text="'剧情简介:'+${media.getMediaIntro()}">  </p>
                                <div style="display: flex">
                                    <a class="nav-link" href="#" data-toggle="modal" data-target="#chapterModal"><button type="button" class="btn btn-outline-danger">开始观看</button></a>
                                </div>
                            </div>

                        </div>
                    </div>
                </li>
            </ul>

            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">影评专区</li>
                </ol>
            </nav>
            <div th:if="${session.admin eq null and session.user eq null}">
            <ul class="list-group">
                <li class="list-group-item">

                        <textarea class="form-control is-invalid"  placeholder="来说几句吧....." name = "comment" disabled></textarea>
                        <button type="submit" class="btn btn-primary" disabled>无法评论</button>
                    <br>
                    <br>

                </li>
            </ul>
                </div>
            <div th:if="${session.admin ne null or session.user ne null}">
                <ul class="list-group">
                    <li class="list-group-item">
                        <form class="was-validated" th:action ="@{/media/comment}">
                            <input type = "hidden" name = "userId" th:value="${user.getUserId()}">
                            <input type = "hidden" name = "mediaId" th:value="${media.getMediaId()}">
                            <textarea class="form-control is-invalid" id="validationTextarea" placeholder="来说几句吧....." name = "comment"></textarea>
                            <button type="submit" class="btn btn-primary">评论</button>
                        </form>
                        <br>
                        <br>
                    <div th:each="co,cState:${comment}">

                        <span th:text="${#dates.format(co.getCommentTime(), 'yyyy-MM-dd HH:mm')}"></span>:
                        <span th:text="${co.getCommentText()}"></span><br>
                    </div>

                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!--        </div>-->
<!--    </div>-->
<!--</div>-->
<div class="modal fade" id="addModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <ul class="list-group" th:each="comment:${commentList}">
        <li class="list-group-item">
            <div class = "container">
                <div class = "media">
                    <a class = "media-left" href = "ciyuanfadian.jsp">
                        <h4 th:value="${comment.getCommentId()}"></h4>
                    </a>
                    <div class = "media-body">
                        <br>
                        <h4 class = "media-heading" th:value="${user.getUserName()}+':&nbsp;&nbsp;&nbsp;&nbsp;'+${comment.getCommentText()}"><</h4>

                    </div>

                </div>
            </div>
        </li>
    </ul>

</div>
    <div th:replace="fragment/model::model_login"></div>
    <div th:replace="fragment/model::model_register"></div>
    <div th:replace="fragment/model::script_login"></div>
    <div th:replace="fragment/model::script_register"></div>
    <div th:replace="fragment/model::script_register_login"></div>
</div>
</body>
</html>
